import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { Props, SelectItems } from "@/components/form_item/formItemConfig"
import { useModalSlideUp } from "@/features/useModal"
import styled from "@emotion/styled"
import { memo } from "react"
import { useFormContext } from "react-hook-form"
import Svg from "../base/Svg"
const SelectContainer = memo(({ fieldName, initValue = "all", selectItems, onClick }: Props) => {
    const _methods = useFormContext()
    const { register, setValue } = _methods
    const _value = _methods.watch(fieldName) || initValue
    const { close } = useModalSlideUp("select")
    const onChangeValue = (value: string) => {
        setValue(fieldName, value)
    }
    return (
        <>
            <SelectTitle>Select Status</SelectTitle>
            <CancelSpan onClick={close}>
                <Svg src={"components/form_item/cancel_icon.svg"} />
            </CancelSpan>
            <SelectBox {...register(fieldName, { value: initValue })}>
                {selectItems?.map((item, index) => {
                    return (
                        <OptionItem
                            className={_value === item.value ? "active" : ""}
                            key={index}
                            value={item.value}
                            onClick={() => {
                                onChangeValue(item.value as string)
                                close()
                                if (onClick) {
                                    onClick()
                                }
                            }}
                        >
                            {item.name}
                            {_value === item.value && (
                                <span>
                                    <Svg src={"components/form_item/selected_icon.svg"} />
                                </span>
                            )}
                        </OptionItem>
                    )
                })}
            </SelectBox>
        </>
    )
})
const Selection = memo(
    ({
        fieldName,
        selectItems = SelectItems,
        initValue = selectItems?.[0]?.value,
        onClick,
        style,
        className = "",
    }: Props) => {
        const methods = useFormContext()
        const { watch } = methods
        const { open } = useModalSlideUp("select")
        const handleOpenModal = () => {
            open(
                <SelectionBox>
                    <SelectContainer {...{ fieldName, initValue, selectItems, onClick }} />
                </SelectionBox>,
            )
        }
        const values = watch(fieldName) || initValue
        const { name } = selectItems.find((item) => item.value === values) || {}
        return (
            <>
                <SelectionButton
                    className={className}
                    style={style}
                    onClick={handleOpenModal}
                >
                    {name}
                    <span>
                        <Svg src={"components/form_item/down_icon.svg"} />
                    </span>
                </SelectionButton>
                <ModalSlideUp familyName="select" />
            </>
        )
    },
)

export default Selection

const SelectionButton = styled.button`
    width: 120rem;
    height: 36rem;
    border-radius: 8rem;
    background-color: #fff;
    outline: none;
    padding: 0 12rem;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0;
    color: #9fa78c;
    position: relative;
    text-align: left;
    text-transform: capitalize;
    border: 1px solid #f2f3f5;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    & > span {
        line-height: normal;
        text-align: center;
        position: absolute;
        right: 10rem;
        width: 20rem;
        height: 20rem;
    }
`

const SelectionBox = styled.div`
    width: 375rem;
    padding: 0 0 20rem;
    border-top-left-radius: 10rem;
    border-top-right-radius: 10rem;
    background: #f2f2f3f2;
    backdrop-filter: blur(160rem);
    position: relative;
`

const SelectTitle = styled.h3`
    font-family: "Gilroy", sans-serif;
    font-weight: 700;
    font-size: 18rem;
    line-height: 28rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: capitalize;
    color: #131416;
`

const SelectBox = styled.ul`
    list-style-type: none;
    margin: 0;
    padding: 0 16rem;
    box-sizing: border-box;
    max-height: 550rem;
    padding-bottom: 0;
    overflow: scroll;
`

const OptionItem = styled.li`
    width: 343rem;
    height: 48rem;
    border-radius: 10rem;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 16rem;
    line-height: 48rem;
    letter-spacing: 0;
    color: #40444f;
    background-color: #fff;
    padding-left: 16rem;
    margin: 0 0 5rem 0;
    box-sizing: border-box;
    position: relative;
    &.active span {
        width: 16rem;
        height: 16rem;
        line-height: normal;
        position: absolute;
        top: 16rem;
        right: 16rem;
    }
`

const CancelSpan = styled.span`
    width: 24rem;
    height: 24rem;
    line-height: normal;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 16rem;
    right: 16rem;
`
